<template>
	<view class="ad-pop">
		<video autoplay :src="adSrc" class="ad-video"></video>
		<view class="close" @click="closed">
			<text style="color:red;display: inline-block;">{{second}}s关闭</text>
			<u-icon name="close-circle" size="24"></u-icon> 
		</view>
	</view>
</template>

<script>
	export default {
		name:"ad",
		props:{
			adSrc:{
				type:String,
				default:'http://192.168.50.16:8083/image/vip/Noelle.mp4'
			}
		},
		data() {
			return {
				timer:null,
				second:30,
			};
		},
		methods:{
			getVip(){
				this.$emit("close")
			},
			error(err){
				console.log(err);
			},
			closed(){
				this.$emit("close")
			}
		},
		created() {
			if(this.timer){
				clearInterval(this.timer);
			}
			this.timer = setInterval(()=>{
				this.second--;
				if(this.second<=0) {
					clearInterval(this.timer)
					this.closed();
					return
				}
			},1000)
		}
	}
</script>

<style lang="scss">
	.ad-pop{
		position: fixed;
		background-color: rgba(0, 0, 0,0.8);
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9999;
	}
	.ad-video{
		width: 100%;
		position: fixed;
		bottom: 0;
		top: 0;
		margin: auto;
		
	}
	.close{
		position: absolute;
		top:20px;
		right: 20px;
		display: flex;
		
	}
	
</style>